<template>
  <el-card class="recent-meetings-card">
    <!-- 卡片头部 -->
    <div class="card-header">
      <span class="card-title">近期会议</span>
      <el-tabs
        v-model="activeTab"
        class="tab-group"
        @tab-click="handleClick"
      >
        <el-tab-pane
          v-for="(tab, index) in tabs"
          :key="index"
          :label="tab.label"
          :name="tab.value"
        ></el-tab-pane>
      </el-tabs>
    </div>

    <!-- 表格区域 all 的区域 -->
    <div class="table-wrapper" v-show="activeTab === 'all' ">
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="headerCellStyle"
        :cell-style="cellStyle"
        :row-style="rowStyle"
        highlight-current-row
      >
        <el-table-column prop="meetingName" label="主题" align="left" width="100"></el-table-column>
        <el-table-column prop="startTime" label="开始时间" align="left" width="170">
          <template slot-scope="scope">
            <span>{{
                scope.row.startTime ? scope.row.startTime.toString().substring(0, scope.row.startTime.toString().lastIndexOf(':')) : '无'
              }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="inviteCount" label="人数" align="left"></el-table-column>
        <el-table-column prop="state" label="状态" align="left">
          <template #default="scope">
            <el-tag
              :type="scope.row.state === 3 ? 'warning' : scope.row.state === 0 ? 'success' : 'danger'"
            >
              {{ scope.row.state === 3 ? '未操作' : scope.row.state === 0 ? '同意' : '拒绝' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="160">
          <template #default="scope">

            <el-popover
              placement="top"
              width="570"
              trigger="click">
              <el-table :data="gridData">
                <el-table-column property="meetingName" align="center" label="会议名"></el-table-column>
                <el-table-column property="meetingLaunchDate" width="170" label="发起时间" align="center">
                  <template slot-scope="scope">
                    <span>{{
                        scope.row.meetingLaunchDate ?  scope.row.meetingLaunchDate.toString().substring(0, scope.row.meetingLaunchDate.toString().lastIndexOf(':')) : '无'
                      }}</span>
                  </template>
                </el-table-column>
                <el-table-column property="nickName" label="发起人" align="center"></el-table-column>
                <el-table-column property="password" label="会议密码" align="center"></el-table-column>
                <el-table-column property="phoneNumber" label="发起人电话" width="160" align="center"></el-table-column>
              </el-table>
              <el-button
                style="margin-right: 10px"
                type="text"
                slot="reference"
                @click="handleView(scope.row)"
              >查看<span v-show="scope.row.state !== 3">会议</span>
              </el-button>
            </el-popover>

            <el-button
              type="text"
              v-show="scope.row.state === 3 && activeTab === 'all' "
              @click="handleOperation(scope.row)"
            >同意
            </el-button>

            <el-popover
              placement="top"
              :value="visible">
              <!--              <p>这是一段内容这是一段内容确定删除吗？</p>-->
              <el-form :model="formRejected" ref="formRejected">
                <el-form-item
                  prop="reason"
                  :rules="[
                    {required: true, trigger: 'blur',message:'理由不可以为空'}
                  ]"
                >
                  <el-input placeholder="请输入拒绝理由" v-model="formRejected.reason" autocomplete="off"
                            clearable></el-input>
                </el-form-item>
              </el-form>
              <div>
                <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                <el-button type="primary" size="mini" @click="submitForm">确定</el-button>
              </div>
              <el-button
                style="margin-left: 10px"
                v-show="scope.row.state === 3 && activeTab === 'all' "
                type="text"
                slot="reference"
                @click="handleRefused(scope.row)"
              >拒绝
              </el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 表格区域 mine 的区域 -->
    <div class="table-wrapper" v-show="activeTab === 'mine' ">
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="headerCellStyle"
        :cell-style="cellStyle"
        :row-style="rowStyle"
        highlight-current-row
      >
        <el-table-column prop="meetingName" label="主题" align="left" width="100"></el-table-column>
        <el-table-column prop="startTime" label="开始时间" align="left" width="170">
          <template slot-scope="scope">
            <span>{{
                scope.row.startTime
                  ? scope.row.startTime.toString().substring(0, scope.row.startTime.toString().lastIndexOf(':'))
                  : '无'
              }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="totalInvites" label="总人数" align="left"></el-table-column>
        <el-table-column prop="rejectedCount" label="拒绝人数" align="left"></el-table-column>
        <el-table-column prop="attendedCount" label="同意人数" align="left"></el-table-column>

      </el-table>
    </div>

    <!-- 表格区域 participate 的区域 -->
    <div class="table-wrapper" v-show="activeTab === 'participate' ">
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="headerCellStyle"
        :cell-style="cellStyle"
        :row-style="rowStyle"
        highlight-current-row
      >
        <el-table-column prop="meetingName" label="主题" align="left" width="100"></el-table-column>
        <el-table-column prop="startTime" label="开始时间" align="left" width="170">
          <template slot-scope="scope">
            <span>{{
                scope.row.startTime
                  ? scope.row.startTime.toString().substring(0, scope.row.startTime.toString().lastIndexOf(':'))
                  : '无'
              }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="password" label="密码" align="left" width="100"></el-table-column>
        <el-table-column prop="meetingLaunchDate" label="发起时间" align="left" width="170">
          <template slot-scope="scope">
            <span>{{
                scope.row.meetingLaunchDate ? scope.row.meetingLaunchDate.toString().substring(0, scope.row.meetingLaunchDate.toString().lastIndexOf(':')) : '无'
              }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="endTime" label="结束时间" align="left" width="170">
          <template slot-scope="scope">
            <span>{{
                scope.row.endTime ? scope.row.endTime.toString().substring(0, scope.row.endTime.toString().lastIndexOf(':')) : '尚未结束'
              }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 指定配置的 Element 分页组件 -->
    <div class="pagination-area">
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </el-card>
</template>

<script>
import {
  getAllMeetingInfo,
  agreeMeeting,
  refusedMeeting,
  getMeetingById,
  getMeetingMine,
  getParticipateMeeting
} from '@/api/meeting'

export default {
  name: 'RecentMeetingsCard',
  data () {
    return {
      activeTab: 'all',
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      tabs: [
        {
          label: '全部',
          value: 'all'
        },
        {
          label: '我发起的',
          value: 'mine'
        },
        {
          label: '我参与的',
          value: 'participate'
        }
      ],
      // 表格数据（实际项目中可根据分页动态加载）
      tableData: [],
      visible: false,
      formRejected: {
        reason: ''
      },
      reasonId: '',
      gridData: []
    }
  },
  computed: {
    headerCellStyle () {
      return {
        backgroundColor: '#FFFFFF',
        color: '#606266',
        fontWeight: 'bold',
        padding: '12px 16px'
      }
    },
    cellStyle () {
      return {
        padding: '12px 16px',
        borderBottom: '1px solid #EBEEF5',
        fontSize: '14px'
      }
    },
    rowStyle ({ rowIndex }) {
      return {
        backgroundColor: rowIndex % 2 === 0 ? 'transparent' : '#fafafa', // 斑马纹优化
        transition: 'background-color 0.2s ease'
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      if (this.activeTab === 'all') {
        getAllMeetingInfo(this.queryParams).then(response => {
          this.total = response.total
          this.tableData = response.rows
        })
      } else if (this.activeTab === 'mine') {
        getMeetingMine(this.queryParams).then(response => {
          this.tableData = response.rows
          this.total = response.total
        })
      } else {
        getParticipateMeeting(this.queryParams).then(response => {
          this.total = response.total
          this.tableData = response.rows
        })
      }
    },
    // 同意会议操作按钮
    handleOperation (row) {
      agreeMeeting(row.id).then(res => {
        if (res.code === 200) {
          this.$message.success('同意成功')
          this.getList()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleRefused (row) {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['formRejected'].resetFields()
      })
      this.reasonId = row.id
    },
    handleView (row) {
      getMeetingById(row.id).then(res => {
        this.gridData = []
        this.gridData.push(res.data)
      })
    },
    submitForm () {
      this.$refs['formRejected'].validate(valid => {
        if (valid) {
          refusedMeeting(this.reasonId, this.formRejected.reason).then(res => {
            if (res.code === 200) {
              this.$message.success('拒绝成功')
              this.visible = false
              this.getList()
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          this.$message.error('请输入拒绝理由')
        }
      })
    },
    handleClick () {
      // tab 栏一切换
      this.getList()
    }
  }
}
</script>

<style lang="less" scoped>
.recent-meetings-card {
  border-radius: 8px;
  border: 1px solid #EBEEF5;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
  overflow: hidden;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #EBEEF5;
    background: #FFFFFF;

    .card-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }

    .tab-group {
      .el-tabs__nav {
        border: none;
        display: flex;
        gap: 8px;

        .el-tabs__item {
          padding: 6px 16px;
          font-size: 14px;
          border: 1px solid #dcdfe6;
          border-radius: 20px;
          background: #fff;
          color: #333;
          transition: all 0.3s;

          &.is-active {
            background: #409eff;
            color: #fff;
            border-color: #409eff;
          }

          &:hover {
            border-color: #409eff;
          }
        }
      }

      .el-tabs__nav-wrap::after {
        content: none;
      }
    }
  }

  .table-wrapper {
    padding: 0 16px;
    margin-top: 16px;
  }

  // 分页区域样式（适配完整分页组件）
  .pagination-area {
    padding: 16px;
    border-top: 1px solid #EBEEF5;
    background: #FFFFFF;

    .pagination {
      width: 100%;
      display: flex;
      justify-content: flex-end; // 靠右显示完整分页组件
      align-items: center;
      gap: 16px; // 元素间距

      // 总数文本样式
      ::v-deep .el-pagination__total {
        color: #666;
        font-size: 14px;
        margin-right: 8px;
      }

      // 条数选择器样式
      ::v-deep .el-pagination__sizes {
        .el-select {
          width: auto;

          .el-input {
            width: 80px;
          }
        }
      }

      // 页码按钮样式
      ::v-deep .el-pager {
        .number {
          margin: 0 4px;

          &.active {
            background: #409eff;
            color: #fff;
          }
        }
      }

      // 上一页/下一页按钮样式
      ::v-deep .el-pagination__prev,
      ::v-deep .el-pagination__next {
        &:hover {
          color: #409eff;
        }
      }

      // 跳转输入框样式
      ::v-deep .el-pagination__jump {
        color: #666;
        font-size: 14px;

        .el-input {
          width: 60px;
          margin: 0 6px;
        }
      }
    }
  }

  // 表格样式
  ::v-deep .el-table {
    border: none !important;
    border-collapse: collapse;

    &__header, &__body {
      tr {
        td, th {
          border-right: none !important;
          border-bottom: 1px solid #EBEEF5 !important;
        }
      }
    }

    &__header-wrapper {
      border-bottom: 1px solid #EBEEF5 !important;
      font-size: 16px;
      font-weight: bold;
    }

    &__body tr:hover > td {
      background-color: #F5F7FA !important;
    }

    &__row {
      height: 56px !important;
    }
  }

  // 状态标签样式
  ::v-deep {
    .el-tag--success {
      background-color: #F0F9EB;
      color: #67C23A;
    }

    .el-tag--info {
      background-color: #ECF5FF;
      color: #409EFF;
    }
  }

  // 操作按钮样式
  .operation-btn {
    color: #409EFF !important;
    font-size: 14px !important;
    padding: 0 6px !important;
    height: auto !important;

    &:hover {
      text-decoration: underline;
    }
  }
}
</style>
